<template>
  <ActionPanel :loading="loading">
    <div v-if="data">
      <InlineBox :column="count < 5 ? count : 5" gap="20px">
        <div v-for="(stat, statName) in stats" :key="statName" class="stat-item">
          <Icon icon="ep:grid" :size="85" />
          <div class="flex flex-col justify-between">
            <div class="flex-center font-size-4">{{ stat.label }}</div>
            <div class="flex-center font-size-5 font-bold">{{ data[statName] || '--' }}</div>
          </div>
        </div>
      </InlineBox>
    </div>
    <ElEmpty v-else description="数据不存在" class="full" />
    <template v-if="close" #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </ActionPanel>
</template>
<script setup lang="ts">
  import { ElButton, ElEmpty } from 'element-plus'
  import { closePopupKey } from '@/components/Popup'
  import { ActionPanel } from '@/components/ActionPanel'
  import { inject, onMounted, ref } from 'vue'
  import { statApi } from '@/seed-application/api'
  import { getAction } from '@/seed-application'
  import { InlineBox } from '@/components/InlineBox'
  import { Icon } from '@/components/Icon'

  export type PropsType = { actionName: string, seedName?: string, microName?: string }
  const props = defineProps<PropsType>()
  const action = getAction(props.actionName, props.seedName, props.microName)
  const stats = action.stats || action.seed.stats
  const count = Object.keys(stats).length
  const close = inject<() => void>(closePopupKey, void 0)
  const data = ref<Record<string, any>>()
  const loading = ref(false)
  onMounted(async () => {
    try {
      loading.value = true
      data.value = await statApi(action)
    } finally {
      loading.value = false
    }
  })
</script>
<style lang="less" scoped>
  .stat-item {
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--el-border-color);
    border-radius: 5px;
    padding: 5px;
    background: #FFF;
  }
</style>
